<template>
  <div class="shpocart" v-show="visible" @click.once="changeVisible()">
    <div class="content"  v-if="list.length">
        <div class="title">
            <span>已选商品</span>
            <span @click.stop="empty()">清空</span>
        </div>

        <div class="list">
            <div class="good" v-for="(item,index) in list" :key="index">
                <div class="imgbox">
                    <img :src="item.imgUrl" alt="">
                </div>
                <div class="text">
                    <div class="name">{{item.name}}</div>
                    <div class="price">
                        <div>￥{{item.pirce}}</div>
                        <div class="btn">
                            <span>-</span>
                            <span>1</span>
                            <span>+</span>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>

    </div>
    <div v-else class="clean">购物车空空如也，快去买点东西吧！</div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            visible:true,
            list:[
                {
                    imgUrl:'http://p0.meituan.net/dealwatera/3845b4f91f4f702f2a382c1b3c044361107347.jpg',
                    name:'安旗蛋糕',
                    pirce:29.9,
                },
                {
                    imgUrl:'http://p0.meituan.net/dealwatera/06bf88cdba669e66fa20b175ce46b21497152.jpg',
                    name:'鸡公爱上虾',
                    pirce:88,
                },
                {
                    imgUrl:'http://p0.meituan.net/deal/bc417b0c95734d2dd95774c0f334c4461457651.jpg',
                    name:'卤校长老火锅',
                    pirce:69,
                },
            ]
        }
    },
    methods: {
        changeVisible(){
            this.visible = !this.visible
        },
        empty(){
            this.list = ''
        }
        
    },

}
</script>

<style lang='scss' scoped>
    .shpocart{
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        position: fixed;
        top:0;
        .content{
            position: absolute;
            left: 0;
            bottom: 1.6rem;
            width: 100%;
            padding: .2667rem;
            box-sizing: border-box;
            background-color: white;
            .title{
                display: flex;
                justify-content: space-between;
                font-weight: bold;
            }
            .list{
                .good{
                    display: flex;
                    margin: .2667rem 0;
                    .imgbox{
                        width: 2.1333rem;
                        margin-right: .2667rem;
                        img{
                            width: 100%;
                            height: 2.6667rem;
                        }
                    }
                    .text{
                        flex: 1;
                        display: flex;
                        flex-direction:column;
                        justify-content: space-between;
                        .name{
                            font-weight: bold;
                            font-size: .48rem;
                        }
                        .price{
                            display: flex;
                            justify-content: space-between;
                            div:first-child{
                                color: red;
                            }
                            .btn{
                                span{
                                    display: inline-block;
                                    width: .3733rem;
                                    height: .3733rem;
                                    border-radius: 50%;
                                    color: white;
                                    background-color: lightskyblue;
                                    line-height: .3733rem;
                                    text-align: center;
                                }
                                span:nth-child(2){
                                    color: black;
                                    border-radius: 0 ;
                                    background-color: white;

                                }
                            }
                            

                        }
                    }
                }


            }

        }
        .clean{
            width: 100%;
            text-align: center;
            color: white;
            font-size: .5333rem;
            margin-top: 2.6667rem;
        }
    }

</style>